import React, {Component} from 'react';
import {observer} from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Tools} from 'weaver-mobile';
import moment from 'moment';
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class Btn extends Component {
    constructor(props){
        super(props);
        this.state = {
            currTime: moment().format('HH:mm:ss')
        }
    }

    componentDidMount(){
        this.monitor();
    }

    monitor = () => {
        this.timer != null && clearInterval(this.timer);
        this.timer = setInterval(() => {
            this.setState({
                currTime: moment().format('HH:mm:ss')
            })
        }, 1000);
    }

    componentWillUnmount = () => {
        this.timer != null && clearInterval(this.timer);
        this.props.store.cleanMonitor();
    }

    directToSignPage = () => {
        const {store: {signLayout, setSignDateTime, positionStatus, cTime}} = this.props;
        if(!positionStatus){
            return;
        }
        setSignDateTime(cTime.format('HH:mm:ss'));
        this.props.history.push({
            pathname: signLayout.path, 
        });
    }

    render(){
        const {currentPositionData} = this.props;
        const {store: {cTime}} = this.props;
        return (
            <div className='signBtnPanel' onClick={this.directToSignPage}>
                <div className='btn'>
                    <div className='lbl'>{getLabel('500503','外勤打卡')}</div>
                    <div className='time'>{cTime.format('HH:mm:ss')}</div>
                </div>
            </div>
        )
    }
}